{extend name="layout/base" /}

{block name="title"}登录{/block}

{block name="main"}
<div class="max-w-sm mx-auto">
    <div style="padding: 100px 0;">asdf</div>

    <!-- 显示消息 -->
    {if session('?message')}
    <div id="toaster" class="toaster top-0 bottom-auto" data-align="center">
        <div class="toast" role="status" aria-atomic="true" aria-hidden="false" data-category="info">
            <div class="alert-destructive">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" x2="12" y1="8" y2="12" />
                    <line x1="12" x2="12.01" y1="16" y2="16" />
                </svg>
                <section>{:session('message')}</section>
            </div>
        </div>
    </div>
    {/if}

    <form class="form grid gap-6" id="loginForm" action="{:url('login/check')}" method="post">
        {:token_field()}

        <div class="floating-label-group">
            <input type="text" id="username" name="username"
                class="form-input w-full px-3 py-6 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all duration-200"
                value="{$old.username ?? ''}" placeholder="" autofocus>
            <label for="username" class="floating-label px-3">用户名 / 邮箱</label>
        </div>

        <div class="floating-label-group">
            <input type="text" id="password" name="password"
                class="form-input w-full px-3 py-6 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all duration-200"
                placeholder="" autofocus>
            <label for="password" class="floating-label px-3">密码</label>
        </div>

        <div class="floating-label-group">
            <img class="absolute input-captcha rounded-sm cursor-pointer" title="刷新验证码" src="{:captcha_src()}" alt="验证码"
                onclick="this.src='/captcha?'+Math.random()">
            <input type="text" id="captcha" name="captcha"
                class="form-input w-full px-3 py-6 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all duration-200"
                placeholder="" autofocus>
            <label for="captcha" class="floating-label px-3">验证码</label>
        </div>

        <div class="grid gap-3">
            <button type="submit" class="btn-primary py-6 text-base">登录</button>
        </div>
    </form>
</div>
{/block}